<template>
  <div>
    <h3>props</h3>
    <h1>{{ info }}</h1>
    <ul>
      <li v-for="item in arr" :key="item.id">
        {{ item.id }}----{{ item.name }}
      </li>
    </ul>
    <button @click="changeProps">是否可以更改props的值</button>
  </div>
</template>

<script>
export default {
  // props格式
  //   props: ["info", "arr"],

  //   props: ["info", "arr"],
  props: {
    info: {
      type: String, //必写
      required: false, //是否必传  可写可不写
      default: "1", //默认值   可选
    },
    arr: {
      type: Array,
    },
  },
  data() {
    return {
      infoNew: "",
    };
  },
  methods: {
    changeProps() {
      console.log(this);
      console.log(this.info);
      console.log(this.arr);
      //   props父传子传递过来的数据不能直接更改，违背了单向数据流的
      // 有需求就得改动info
      // 怎么改动 1.去父组件当中改动 2 在当前组件重新赋值，进行改动
      //   this.info = "xxx";
      this.infoNew = this.info;
      this.infoNew = "YYY";
      // 当是props接收的是引用数据类型时，直接改动不会报错，但是不建议这样使用，违背了单向数据流
      this.arr[0].name = "lele";
      //   为何是基本数据类型时报错，是引用数据 类型时不报错？
      //   监听的是栈内存中的值 基本数据类型存储的是值，引用数据类型 地址指针 改动时只改动堆内存中的值 栈内存中的地址指针不变
    },
  },
};
</script>

<style lang="scss" scoped>
</style>